<template>
  <div class="demo">
    <el-button>element-ui</el-button>
    <div class="echarts-container" ref="container"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import _ from "lodash";
import moment from "moment";
import { ref, reactive, onMounted } from "vue";
let now = reactive(moment());
let str = ref<String>("");
const container = ref(null);
const init = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(container.value);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
};
onMounted(() => {
  console.log(now);
  str = _.join(["hello", "world", "lodash"], " ");
  console.log(str);
  init();
});
</script>
<style lang="scss" scoped>
.demo {
  div {
    border: 1px solid #000;
    margin: 10px 0;
  }
  .echarts-container {
    width: 500px;
    height: 500px;
    margin: 0;
  }
}
</style>
